<template>


  <!-- 首页顶部横向菜单 -->
  <van-tabs v-model:active="activeTab" color="#e54847" :border="true" :sticky="true" offset-top="50.5"
    title-active-color="#333" @click-tab="onClickTab" class="tabs">
    <!-- 城市定位 -->
    <van-tab to="/cityList" v-show="activeTab === 0">
      <template #title>
        <template v-if="currentCity.nm"> {{ currentCity.nm }} </template>
        <template v-else><van-icon name="location-o" size="22" /></template>
        <van-icon name="arrow-down" />
      </template>
    </van-tab>

    <!-- 顶部横向菜单 -->
    <van-tab v-for="(tab, index) in tabs" :key="index">
      <template #title>
        {{ tab }}
      </template>
      <!--  这里是内容 -->
      <template #default>
        <!-- 热映 -->
        <template v-if="activeTab === 1">
          <TopRateMoviesCmp />
          <HotFilmListCmp />
        </template>
        <!-- 影院 -->
        <template v-if="activeTab === 2">
          <CinemasCmp />
        </template>
        <!-- 待映 -->
        <template v-if="activeTab === 3">
          <TopExpectedMoviesCmp />
          <ExpectedFilmListCmp />
        </template>

        <!-- 经典电影 -->
        <template v-if="activeTab === 4">
          <ClassicMoviesCmp />
        </template>



        <!-- <template v-if="activeTab == 5">
          <ClassicMoviesCmp />
        </template> -->

      </template>
    </van-tab>

    <!-- 搜索 -->
    <van-tab to="/search">
      <template #title>
        <van-icon name="search" size="22" color="#e54847" />
      </template>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import HotFilmListCmp from '@/components/movie_cinema/hot_movies/HotFilmListCmp.vue'
import CinemasCmp from '@/components/movie_cinema/cinemas/CinemasCmp.vue'
import { useRouter } from 'vue-router'
import { ref, computed, onMounted, watch } from 'vue'
import { useStore } from '@/stores/index.js'
// import SearchCmp from '@/components/movie_cinema/search/SearchCmp.vue'
const store = useStore()
// 使用 computed 来确保 currentCity 是响应式的
const currentCity = computed({
  get: () => store.currentCity,
  set: (value) => {
    store.setCurrentCity(value)
  },
})



const activeTab = ref(1) //热映
store.setActiveTab(activeTab.value)

// const getComponent = (activeValue) => {
//   if (activeValue === 1) return HotFilmListCmp
//   if (activeValue === 2) return CinemasCmp
//   if (activeValue === 3) return null // 待映
//   if (activeValue === 4) return null // 经典电影
//   return null
// }

const tabs = ref(['热映', '影院', '待映', '经典电影'])
const router = useRouter()
onMounted(() => {
  if (!currentCity.value || currentCity.value.nm == '') {
    router.push('/cityList')
  }
})

const onClickTab = ({ name }) => {
  console.log('name:', name)
  // console.log('active:', active.value)
  activeTab.value = name
  store.setActiveTab(name)
};

watch(
  () => store.activeTab,
  (newVal) => {
    // console.log('new active:', newVal)
    activeTab.value = newVal
  },
  {
    immediate: true,
  },
);
</script>

<style scoped>
.tabs {
  font-size: 18px;

}

:deep(.van-tabs__nav) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.van-tab--active) {
  font-weight: 700;
}
</style>
